import { useRouter } from "@tarojs/taro";
import { View } from "@tarojs/components";

import ByRow from "@/components/ui/ByRow";
import ByCol from "@/components/ui/ByCol";
import ByCell from "@/components/ui/ByCell";
import ByText from "@/components/ui/ByText";
import Moment from "@/components/app/Moment";
import Divider from "@/components/app/Divider";

import ApiBudget from "@/api/budget";
import useFetch from "@/hooks/useFetch";

import { MaterialBudgetItem } from "@/types/budget";
import Card from "@/components/common/Card";

const enumMeasureList = [
  { label: "测量数量", key: "MeasureNum" },
  { label: "结算预算数量", key: "JSBudNum" },
  { label: "销售数量", key: "SaleNum" },
];

/**
 * 测量
 * @param param0
 * @returns
 */
const ItemMeasure = ({ source }: { source: MaterialBudgetItem }) => {
  return (
    <View className="m-3 px-3 pt-3 bg-white rounded-xl shadow-black-1">
      <View className="mb-1">{source.materialName}</View>

      <ByCell size="small" labelWidth="4em" label="规格参数">
        {source.MaterialSpec}
        {source.MaterialUnit}
      </ByCell>
      <ByCell size="small" labelWidth="4em" label="品牌">
        {source.brandCategory || "-"}
      </ByCell>

      <ByRow content="between" className="bg-page p-2 rounded-md">
        {enumMeasureList.map((item) => (
          <View className="text-center">
            <ByText size="sm" type="second">
              {item.label}
            </ByText>
            <View className="mt-1">{source[item.key] || 0}</View>
          </View>
        ))}
      </ByRow>

      <View className="py-2">
        <ByCell label="预算备注" className="mt-1" size="small">
          {source.BudgetRemark}
        </ByCell>

        <ByCell label="测量备注" className="mt-1" size="small">
          {source.MeasureRemark}
        </ByCell>

        <ByCell label="预算备注" className="mt-1" size="small">
          {source.BudgetRemark}
        </ByCell>

        <ByCell label="到场时间" size="small">
          <Moment value={source.requiredArrivalTime} />
        </ByCell>
      </View>
    </View>
  );
};

/**
 * MaterialMeasureDetailItem
 */
export interface MaterialMeasureDetailItem {
  /**
   * 区域
   */
  Area: string;
  /**
   * 预算备注
   */
  BudgetRemark?: string;
  /**
   * 购买金额
   */
  BuyMoney?: number;
  /**
   * 购买价格
   */
  BuyPrice: number;
  /**
   * 结算预算数量
   */
  JSBudNum: number;
  /**
   * 材料编码
   */
  MaterialCode: string;
  /**
   * 材料ID
   */
  MaterialId: number;
  /**
   * 材料名称
   */
  MaterialName: string;
  /**
   * 材料规格
   */
  MaterialSpec?: string;
  /**
   * 材料单位
   */
  MaterialUnit: string;
  /**
   * 测量详情ID
   */
  MeasureDetailId: number;
  /**
   * 测量数量
   */
  MeasureNum: number;
  /**
   * 测量备注
   */
  MeasureRemark?: string;
  /**
   * 备注
   */
  Remark?: string;
  /**
   * 销售金额
   */
  SaleMoney?: number;
  /**
   * 销售数量
   */
  SaleNum?: number;
  /**
   * 销售价格
   */
  SalePrice: number;
  /**
   * 销售单位
   */
  SaleUnit?: string;
  [property: string]: any;
}

/**
 * MaterialMeasureItem
 */
export interface MaterialMeasureItem {
  /**
   * 单据编号
   */
  BillNo: string;
  /**
   * 预算列表ID
   */
  BudgetListId: string;
  /**
   * 预算备注
   */
  BudgetRemark?: string;
  /**
   * 购买总金额
   */
  BuyTotalMoney?: string;
  /**
   * 选择详情ID
   */
  ChooseDetailId: number;
  /**
   * 确认日期
   */
  ConfirmDate?: string;
  /**
   * 确认用户名
   */
  ConfirmUserName?: string;
  /**
   * 创建日期
   */
  CreateDate: string;
  /**
   * 创建用户名
   */
  CreateUserName: string;
  /**
   * 客户名称
   */
  CustomerName: string;
  /**
   * 客户编号
   */
  CustomerNo: string;
  /**
   * 装修地址
   */
  DecorationFullAddress: string;
  /**
   * 编辑日期
   */
  EditDate?: string;
  /**
   * 编辑用户名
   */
  EditUserName?: string;
  /**
   * 文件引用ID
   */
  FileRefererId: string;
  /**
   * 通知数据
   */
  InformData?: string;
  /**
   * 意向客户ID
   */
  IntentCustomerId: number;
  /**
   * 材料编码
   */
  MaterialCode: string;
  /**
   * 材料ID
   */
  MaterialId: number;
  /**
   * 材料名称
   */
  MaterialName: string;
  /**
   * 材料规格
   */
  MaterialSpec?: string;
  /**
   * 材料单位
   */
  MaterialUnit: string;
  /**
   * 测量日期
   */
  MeasureDate?: string;
  /**
   * 测量文件引用ID
   */
  MeasureFileRefererId?: string;
  /**
   * 测量ID
   */
  MeasureId: number;
  /**
   * 测量备注
   */
  MeasureRemark?: string;
  /**
   * 测量状态
   */
  MeasureState: number;
  /**
   * 图片数量
   */
  PicCount: number;
  /**
   * 拒绝日期
   */
  RejectDate?: string;
  /**
   * 拒绝原因
   */
  RejectReason?: string;
  /**
   * 拒绝用户名
   */
  RejectUserName?: string;
  /**
   * 备注
   */
  Remark: string;
  /**
   * 要求测量日期
   */
  RequireMeasureDate: string;
  /**
   * 结果字符串
   */
  ResultSrt?: string;
  /**
   * 销售总金额
   */
  SaleTotalMoney?: string;
  /**
   * 供应商确认日期
   */
  SupplyConfirmDate?: string;
  /**
   * 供应商ID
   */
  SupplyId: number;
  /**
   * 供应商名称
   */
  SupplyName: string;
  /**
   * 供应商拒绝日期
   */
  SupplyRejectDate?: string;
  /**
   * 供应商拒绝原因
   */
  SupplyRejectReason?: string;
  [property: string]: any;
}

export default () => {
  const { params } = useRouter();
  const measureId = Number(params.measureId);

  const { data } = useFetch<{
    details: MaterialBudgetItem[];
    master: MaterialMeasureDetailItem;
  }>(ApiBudget.getMaterialMeasureById, {
    defaultParams: [{ measureId }],
    showLoading: true,
  });

  const { master, details } = data || {};
  // const { getOption } = useEnum(enumMaterialApplyBillsStatus);

  return (
    <>
      <Card title={`测量申请单号：${master?.BillNo}`}>
        <ByCell label="供应商">{master?.SupplyName || "-"}</ByCell>

        {/* MeasureState 测量状态 */}

        <ByCell label="要求测量时间" size="small">
          <Moment value={master?.RequireMeasureDate} />
        </ByCell>

        <ByCell label="测量日期" size="small">
          <Moment value={master?.MeasureDate} />
        </ByCell>

        <ByCell label="测量备注" size="small">
          {master?.MeasureRemark}
        </ByCell>

        <Divider />

        <ByCell label="确认时间" size="small">
          <Moment value={master?.ConfirmDate} />
        </ByCell>

        <ByCell label="确认用户" size="small">
          <Moment value={master?.ConfirmUserName} />
        </ByCell>

        <ByCell label="供应商确认时间" size="small">
          <Moment value={master?.SupplyConfirmDate} />
        </ByCell>

        <Divider />

        <ByCell label="供应商拒绝日期" size="small">
          <Moment value={master?.SupplyRejectDate} />
        </ByCell>

        <ByCell label="供应商拒绝原因" vertical size="small">
          {master?.SupplyRejectReason}
        </ByCell>

        <Divider />

        <ByCell label="拒绝日期" size="small">
          <Moment value={master?.RejectDate} />
        </ByCell>

        <ByCell label="拒绝用户" size="small">
          <Moment value={master?.RejectUserName} />
        </ByCell>

        <ByCell label="拒绝原因" size="small">
          <Moment value={master?.RejectReason} />
        </ByCell>

        <ByRow wrap>
          <ByCol span={6}>
            <ByCell label="购买总金额" vertical size="small">
              {master?.BuyTotalMoney || "-"}
            </ByCell>
          </ByCol>
          <ByCol span={6}>
            <ByCell label="销售总金额" vertical size="small">
              {master?.SaleTotalMoney || "-"}
            </ByCell>
          </ByCol>
        </ByRow>
      </Card>

      {details?.map((item) => (
        <ItemMeasure source={item} key={item.materialId} />
      ))}

      <View className="safe-footer" />
    </>
  );
};
